<template>
    <div class="bread-crumb-item" @click="toPath">
        <slot></slot>
        <span class="separatorIcon" v-if="breadCrumbContext?.separatorIcon">
            <component :is="breadCrumbContext?.separatorIcon"></component>
        </span>
        <span class="separator">{{ breadCrumbContext?.separator }}</span>
    </div>
</template>

<script setup>
import { inject, computed, getCurrentInstance } from 'vue';
import { breadcrumbKey } from '../constants.js';
const breadCrumbContext = inject(breadcrumbKey, undefined);
// const breadCrumbItemUidList = inject('breadCrumbItemUidList', []);
const instance = getCurrentInstance();

const router = instance.appContext.config.globalProperties.$router;


defineOptions({
    name: 'BreadCrumbItem',
    inheritAttrs: true
});

const props = defineProps({
    to: {
        type: String,
        default: ''
    },
    replace: {
        type: Boolean,
        default: false
    }
});

const toPath = () => {
    if (props.to) {
        if (props.replace) {
            router.replace(props.to);
        } else {
            router.push(props.to);
        }
    }
}

// const noFirst = computed(() => {
//     if (instance && instance.uid && breadCrumbItemUidList.value.length > 0) {
//         return breadCrumbItemUidList.value.length > 0 && breadCrumbItemUidList.value[0] !== instance.uid;
//     }
//     return false;
// });
</script>

<style scoped lang="scss">
.bread-crumb-item {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--light-text);
    cursor: pointer;

    .separator {
        margin: 0 4px;
        color: #6c757d;
    }
}
</style>
